<template>
   <div class="commentList">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onCommentLoad"
        >
            <ul>
                <li v-for="(item, index) in commentList" v-bind:key="index">
                    <div class="header">
                        <div class="name">
                            {{item.userNickName}} <van-rate disabled disabled-color="#ffd21e" v-model="item.starNum" :size="12"></van-rate>
                        </div>

                        <div class="time">{{item.commentTime.split ? item.commentTime.split(' ')[0] : item.commentTime}}</div>
                    </div>

                    <div class="content">
                        {{item.commentContent}}
                    </div>
                    <div class="content showReply" v-if="item.replyContent" style="background: #FFDAC8; padding: 10px; font-size: 12px; color: #FF3300; border-radius:6px; margin-top:10px;">
                        掌柜回复：{{item.replyContent}}
                    </div>
                </li>
            </ul>
        </van-list>
   </div>
</template>

<script>
export default {
    name: 'comments',
    data() {
        return {
            pageNum: 0,
            total: -1,
            loading: false, //是否正在加载
            finished: false, //是否加载完了
            commentList: [],
        }
    },

    methods: {
        onCommentLoad() {
            if (this.pageNum >= this.total && this.total !== -1) {
                this.finished = true;
                return;
            }
            this.pageNum++;
            this.getComment();
        },
       

        getComment() {
            this.loading = true;
            this.$http.post('/shop/goods/front/getGoodsCommentList', {
                goodsId: this.$route.params.id,
                pageSize: 10,
                pageNum: 1,
                commentType: this.commentType, 
            }).then(res => {
                if (res.status === 0) {
                    console.log('获取评论列表成功')
                    console.log(res)
                    this.loading = false;
                    this.total = res.data.total;
                    this.commentList = res.data.rows || [];
                    if (this.pageNum >= this.total && this.total !== -1) {
                        this.finished = true;
                        return;
                    }
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.commentList { height: 100%; background-color: #fff;}
    ul {
        padding: 0 10px;
        li {
            padding: 10px 0;
            border-bottom: 1px solid #ebedf0;
            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #999;
                font-size: 12px;
                /deep/ .van-rate {
                    display: inline-block;
                    vertical-align: middle;
                }
            }


            .content {
                position: relative;
                line-height: 1.3;
                margin: 5px 0;
                word-break: break-all;
                // overflow: hidden;
            }

            .showReply::before{
                content: '';
                width: 0;
                height: 0;
                border: 12px solid;
                position: absolute;
                top: -20px;
                left: 15px;
                border-color:transparent transparent #FFDAC8 transparent;
            }
        }
    }
</style>
